var OrderDetail = function () {
  var template = /* html */ `
    <div class="order-detail">
      <template v-if="wpcbList.length>0">
        <div class="order-detail-title">车间配套情况</div>
        <div class="order-detail-workshop">
          <div v-for="wpcb in wpcbList" :key="wpcb.id">
            {{wpcb.workshopName}}:{{statusData[wpcb.maixStatus]}}
          </div>
        </div>

        <div class="order-detail-title">订单物料</div>
        <div class="order-detail-material">
          <el-table fit stripe border :data="materialTypeList" style="width: 100%">
            <el-table-column :resizable="false" label="行号" prop="lineNo" width="60px" align="center"></el-table-column>
            <el-table-column label="物料类型" prop="materialType" min-width="120px" header-align="center"></el-table-column>
            <el-table-column label="数量" prop="stockCount" min-width="120px" align="center"></el-table-column>
          </el-table>
        </div>
      </template>
    </div>
  `;

  return {
    props: {
      orderMatch: {
        type: Object,
        required: true
      }
    },

    computed: {
      wpcbList: function () {
        return this.orderMatch.wpcbList;
      },

      materialTypeList: function () {
        return this.orderMatch.getMaterialTypeList();
      }
    },

    data: function () {
      return {
        statusData: {
          "2": "不配套",
          "4": "配套"
        }
      };
    },

    template: template
  };
}();
